<template>
  <div class="hot">
      <div class="hot-coffee">
          <div class="hot-img">
              <div class="hot-box">hot</div>
              <img :src="hot.smallImg" alt="">
          </div>
          <div class="hot-zhtitle">{{hot.name}}</div>
          <div class="hot-entitle one-text">{{hot.enname}}</div>
          <div class="hot-price">¥{{hot.price}}</div>
      </div>
  </div>
</template>

<script>
export default {
    name:'HotCoffee',
    props: {
        hot: {
            type:Object,
            default() {
                return {};
            }
        }
    }
}
</script>

<style lang='less' scoped>
@import url('../assets/base.less');

    .hot-coffee {
        background-color: #fff;
        padding:10px;
        .hot-img {
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            .hot-box {
                position: absolute;
                top:0;
                left:10px;
                padding: 5px 4px;
                // background-color: #2950D8;
                background-color: @homehot;
                color:#fff;
                border-bottom-left-radius: 5px;
                border-bottom-right-radius: 5px;
            }
        }
        .hot-zhtitle {
            margin-top: 10px;
            font-size:16px;
            color:#444;
        }
        .hot-entitle {
            margin-top: 5px;
            font-size:12px;
            color:#aaa;
        }
        .hot-price {
            font-size:16px;
            font-weight:bold;
            color:@priceColor;
            margin-top: 10px;
            margin-bottom: 10px;
        }
    }
</style>